<template>
  <div class="app-container">
    <el-dialog title="绑定角色"
               :close-on-click-modal=false
               :visible.sync="dialogVisible">

      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         prop="ischeckedd"
                         width="55">
        </el-table-column>

        <el-table-column label="id"
                         width="120"
                         prop="id">
        </el-table-column>
        <el-table-column prop="name"
                         label="角色名">
        </el-table-column>

      </el-table>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   :loading="formLoading"
                   @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRole, saveRole } from '@/api/sys/account'

export default {
  name: 'role-dialog',
  data () {
    return {
      loading: false,
      dialogVisible: false,
      formLoading: true,
      tableData: [{
        id: 1,
        ischeckedd: true,
        name: '王小虎'
      }, {
        id: 2,
        ischeckedd: false,
        name: '王小虎2',
      }],
      multipleSelection: []
    }
  },
  created () { },
  updated () { },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val;
    },
    open (id) {
      let that = this
      that.dialogVisible = true
      that.formLoading = true

      // getRole(id).then(response => {
      //   console.log(response)
      //   that.formLoading = false
      // })
    },
    close () {
      this.dialogVisible = false
    }
  }
}
</script>
